<template>
	<view class="">
		<view class="bg-primary p-3">
			<view class="text-white mb-2 font-32">账户余额</view>
			<view class="flex j-sb a-center">
				<view class="text-white font-50 font-bold">￥0</view>
				<view class="text-white font-26 rounded-40 h-60 col-5 flex a-center j-center border-white border"
					@click="handleGo">账户明细
				</view>
			</view>
			<view class="h-50"></view>
		</view>
		<view class="bg-white z-index-3 relative py-2" style="border-radius: 15px 15px 0 0;margin-top: -40rpx;">
			<view class="flex j-start flex-wrap">
				<view class="text-center span-5 py-3 border-item">
					<image src="/static/images/weixin.png" mode="" class="svg60"></image>
					<view class="my-1 text-secondary font-24">微信曝光量</view>
					<view class="font-32 font-bold">0</view>
				</view>
				<view class="text-center span-5 py-3 border-item">
					<image src="/static/images/douyin.png" mode="" class="svg60"></image>
					<view class="my-1 text-secondary font-24">抖音曝光量</view>
					<view class="font-32 font-bold">0</view>
				</view>
				<view class="text-center span-5 py-3 border-item">
					<image src="/static/images/dengdaidaofang.png" mode="" class="svg60"></image>
					<view class="my-1 text-secondary font-24">到访量</view>
					<view class="font-32 font-bold">0</view>
				</view>
				<view class="text-center span-5 py-3 border-item">
					<image src="/static/images/zijinjihua.png" mode="" class="svg60"></image>
					<view class="my-1 text-secondary font-24">留资量</view>
					<view class="font-32 font-bold">0</view>
				</view>
				<view class="text-center span-5 py-3 border-item">
					<image src="/static/images/tuiguangweixinqun.png" mode="" class="svg60"></image>
					<view class="my-1 text-secondary font-24">微信群转发量</view>
					<view class="font-32 font-bold">0</view>
				</view>
				<view class="text-center span-5 py-3 border-item">
					<image src="/static/images/iconfontzhizuobiaozhunbduan36.png" mode="" class="svg60"></image>
					<view class="my-1 text-secondary font-24">朋友圈转发</view>
					<view class="font-32 font-bold">0</view>
				</view>
				<view class="text-center span-5 py-3 border-item">
					<image src="/static/images/douyin.png" mode="" class="svg60"></image>
					<view class="my-1 text-secondary font-24">抖音转发量</view>
					<view class="font-32 font-bold">0</view>
				</view>
			</view>


		</view>
		<view class="flex j-sb p-2 a-center">
			<view class="font-bold font-32">到访数据</view>
			<view class="flex j-center a-center h-60 bg-primary rounded-10 col-6" @click="handleMap">
				<u-icon name="map" color="#fff" size="14"></u-icon>
				<view class="text-white ml-1 font-26">区域热力图</view>
			</view>
		</view>
		<view class="px-3 pb-3">
			<view class="p-3 bg-white rounded-10 mb-3" v-for="(item,index) in 5" :key="index">
				<view class="mb-3 flex j-start a-center">
					<view class="text-secondary col-4">姓名</view>
					<view class="flex-1 ml-1">赵三</view>
				</view>
				<view class="mb-3 flex j-start a-center">
					<view class="text-secondary col-4">身份证号</view>
					<view class="flex-1 ml-1">430204195608051025</view>
				</view>
				<view class="mb-3 flex j-start a-center">
					<view class="text-secondary col-4">手机号</view>
					<view class="flex-1 ml-1">19012345678</view>
				</view>
				<view class="flex j-start a-center mb-3">
					<view class="text-secondary col-4">意向等级</view>
					<view class="flex-1 ml-1 text-danger">D级</view>
				</view>
				<view class="mb-3 flex j-start a-center">
					<view class="text-secondary col-4">积极度</view>
					<view class="flex-1 ml-1">0</view>
				</view>
				<view class="flex j-start a-center">
					<view class="text-secondary col-4">到访时间</view>
					<view class="flex-1 ml-1">2024-07-11 16:34:07</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			handleGo() {
				uni.navigateTo({
					url: '/pages/h5/account'
				})
			},
			handleMap() {
				uni.navigateTo({
					url: '/pages/h5/map'
				})
			}
		}
	}
</script>

<style lang="scss">
	.border-item {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			right: 0;
			top: 20%;
			bottom: 23%;
			width: 1px;
			background-color: #d6d6d6;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 20%;
			right: 20%;
			height: 1px;
			background-color: #d6d6d6;
		}
	}

	.border-item:nth-of-type(7) {
		&::before {
			background-color: #fff;
		}
	}

	.border-item:nth-of-type(5),
	.border-item:nth-of-type(6),
	.border-item:nth-of-type(7),
	.border-item:nth-of-type(8) {
		&::after {
			background-color: #fff;
		}
	}
</style>